<template>
  <div class="senCode">
    <el-form
      ref="verificationForm"
      :model="verificationForm"
      :label-width="lang === 'cn' ? '60px' : '120px'"
    >
      <el-form-item :label="getLabel">
        <el-input
          disabled
          v-model="verificationForm.email_phone"
          :placeholder="$t('members.chengyuan61')"
        />
      </el-form-item>

      <el-form-item :label="$t('login.mima8')">
        <el-input
          type="textarea"
          :rows="2"
          :autosize="false"
          v-model="verificationForm.code"
          :placeholder="$t('login.mima9')"
        />
        <span v-show="!isClickCode && count_down === 60" class="sendCode" @click="sendCode">{{
          $t('login.mima12')
        }}</span>
        <span v-show="isClickCode && count_down > 0" class="sendCode"
          >{{ count_down }}{{ $t('login.mima15') }}</span
        >
        <span v-show="isClickCode && count_down === 0" class="sendCode" @click="sendCode">
          {{ $t('login.mima16') }}
        </span>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
export default {
  // <!-- 机构成员 -->
  name: 'senCode',

  computed: {
    // 获取动态的表单label
    getLabel() {
      let label = '';
      if (this.caminho === 'mobile') {
        label = this.$t('zhuce.zhuce33');
      } else if (this.caminho === 'email') {
        label = this.$t('zhuce.zhuce2');
      }
      return label;
    },
  },
  watch: {
    '$i18n.locale': 'i18nHandle',
  },
  data() {
    return {
      caminho: '',
      // 记录当前国际化
      lang: this.$i18n.locale,
      // 确定是否点击过验证码
      isClickCode: false,
      clickCount: 0,
      // 发送验证码倒计时
      count_down: 60,
      downTime: null,

      // 第二个步骤中验证身份表单数据
      verificationForm: {
        // 邮箱
        email_phone: '',
        // 验证码
        code: '',
      },
    };
  },

  created() {
    this.verificationForm.email_phone = localStorage.getItem('user_name');
    // 获取当前是手机号还是邮箱登录的
    this.getLoginCaminho();
  },
  mounted() {},
  methods: {
    i18nHandle(val, oldVal) {
      this.lang = val;
    },
    getLoginCaminho() {
      this.$http
        .get(`/sys/dict/data/verifyLoginMethod`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.caminho = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    sendCodeAction() {
      this.count_down = 60;
      this.downTime = setInterval(() => {
        this.isClickCode = true;
        this.count_down--;
        if (this.count_down === 0) {
          this.clickCount = 0;
          clearInterval(this.downTime);
        }
      }, 1000);
    },

    sendCode() {
      this.clickCount++;
      if (this.clickCount !== 1) {
        return false;
      }
      if (this.caminho === 'mobile') {
        let formData = new FormData();
        formData.append('phone', this.verificationForm.email_phone);
        this.$http
          .post('/smsMessage/send', formData)
          .then((res) => {
            if (res.data.code !== 0) {
              this.clickCount = 0;
              return this.$message.error(res.data.msg);
            } else {
              this.$message.success(this.$t('zhuce.zhuce36'));
              this.sendCodeAction();
            }
          })
          .catch((e) => {
            this.clickCount = 0;
            console.error(e);
          });
      } else if (this.caminho === 'email') {
        this.$http
          .get(
            `/open/sms/sendSms?uniqueKey=${
              this.verificationForm.email_phone
            }&type=BIND_EMAIL&lang=${localStorage.getItem('lang')}`,
          )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.clickCount = 0;
              return this.$message.error(res.msg);
            } else {
              this.sendCodeAction();
            }
          })
          .catch((err) => {
            this.clickCount = 0;
            console.log('err', err);
          });
      }
    },
  },
};
</script>
  
  <style lang="scss">
.sendCode {
  position: absolute;
  bottom: -7px;
  right: 20px;
  // border-left: 1px solid #e4e7ed;
  // padding-left: 10px;
  // height: 30px;

  // line-height: 30px;
  // transform: translate(0, -50%);
  cursor: pointer;
  color: #003e67;
}
</style>
  